<!doctype html>
<html lang="zh-CN">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="">
	<meta name="author" content="xuejianxinokok">
	<title>V1测试</title>
	<link rel="stylesheet" href="./resources/css/bootstrap.min.css" />
	<link rel="stylesheet" href="./resources/css/dashboard.css" />
	<meta name="theme-color" content="#7952b3">

	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<!-- 引入组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<style>
		.bd-placeholder-img {
			font-size: 1.125rem;
			text-anchor: middle;
			-webkit-user-select: none;
			-moz-user-select: none;
			user-select: none;
		}

		@media (min-width: 768px) {
			.bd-placeholder-img-lg {
				font-size: 3.5rem;
			}
		}

		.b-example-divider {
			height: 3rem;
			background-color: rgba(0, 0, 0, .1);
			border: solid rgba(0, 0, 0, .15);
			border-width: 1px 0;
			box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
		}

		.b-example-vr {
			flex-shrink: 0;
			width: 1.5rem;
			height: 100vh;
		}

		.bi {
			vertical-align: -.125em;
			fill: currentColor;
		}

/* ------0706 */

		.user-list-cls {
			margin: 10px auto;
			width: 800px;
			border: 1px solid black;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			overflow: hidden;
		}

		a {
			text-decoration: none;
		}

		a:hover {
			cursor: pointer;
			color: blue;
		}

		ul li {
			list-style: none;
			display: inline;
			padding-left: 30px;
		}

		li:first-child {
			padding-left: unset;
		}

		.btn-disabled {
			pointer-events: none;
			color: red;
		}

		.btn-active {
			pointer-events: auto;
			color: green;
		}

		.page-input {
			margin-left: 5px;
			margin-right: 5px;
			width: 27px;
		}
	</style>



</head>

<body>
	<div id="app">
		<!--参考文档 https://v5.bootcss.com/docs/5.1/getting-started/introduction/-->
		<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
			<a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="#">Company name</a>
			<button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse"
				data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false"
				aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>
			<input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
			<div class="navbar-nav">
				<div class="nav-item text-nowrap">
					<a class="nav-link px-3" href="#">Sign out</a>
				</div>
			</div>
		</header>

		<div class="container-fluid">
			<div class="row">




				<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
					<div class="position-sticky pt-3">
						<ul class="nav flex-column">
							<li class="nav-item">
								<a class="nav-link active" aria-current="page" href="#">
									<span data-feather="home"></span>
									Dashboard
								</a>
							</li>

							<li class="nav-item">
								<a class="nav-link" href="http://localhost:8080/swagger" target="_blank">
									<span data-feather="bar-chart-2"></span>
									Swagger
								</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="https://v5.bootcss.com/docs/5.1/getting-started/introduction/"
									target="_blank">
									<span data-feather="layers"></span>
									Bootstrap文档
								</a>
							</li>

							<li class="nav-item">
								<a class="nav-link" href="https://feathericons.com/" target="_blank">
									<span data-feather="image"></span>
									feather图标库
								</a>
							</li>
							<!--
			  <li class="nav-item">
				<a class="nav-link" href="#">
				  <span data-feather="shopping-cart"></span>
				  Products
				</a>
			  </li>
			  <li class="nav-item">
				<a class="nav-link" href="#">
				  <span data-feather="users"></span>
				  Customers
				</a>
			  </li>
			  -->
						</ul>


					</div>
				</nav>

				<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
					<div
						class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
						<h1 class="h2">设备列表 &nbsp;【当前在线{{onlineCount}}】
						</h1>
						<div class="btn-toolbar mb-2 mb-md-0">
							<div class="btn-group me-2">
								<button type="button" class="btn btn-sm btn-outline-secondary"
									@click="showDialogMsg('_ALL_')">广播消息</button>
							</div>

						</div>
					</div>

					<div class="table-responsive">
						<table class="table table-striped table-sm table-hover">
							<thead>
								<tr>
									<th scope="col">行号</th>
									<th scope="col">ID</th>
									<th scope="col">用户</th>
									<th scope="col">电话</th>
									<th scope="col">购买日期</th>
									<th scope="col">购买数量</th>
									<th scope="col">最近购买日期</th>
									<th scope="col">用户购卡顺序</th>
								</tr>
							</thead>
							<tbody>
								<tr v-for="(o,i) in list" :key="o.id">
									<td :class="{'bg-success' : o.isOnline}">
										{{i+1}}
									</td>
									<td>{{o.id}}</td>
									<td>{{o.username}}</td>
									<td>{{o.tel}}</td>
									<td>{{o.create_time}}</td>
									<td>{{o.tel_count}}</td>
									<td>{{o.last_date}}</td>
									<td>{{o.tel_order}}</td>
								</tr>
							</tbody>
						</table>
					</div>
					<!--自己的实现分页方法-->
					<ul>
						<li>
							<a href="#!" @click="searchUserList(1)">首页</a>
						</li>

						<!--动态的加style-->
						<li>
							<a href="#!" @click="searchUserList(currentPage-1)" :style="currentPage == 1 ?
		   'pointer-events: none; color: red' :
		   'pointer-events: auto; color: green'">上一页</a>
						</li>

						<!--Vue直接遍历数字-->
						<!--
		<li v-for="(index) of totalPage">
		  <a href="#!" @click="searchUserList(index)"
		  :style="currentPage == index ? 'color: #B25BFF' : 'color: pink'">{{index}}</a>
		</li>
	-->
						<li v-for="item of pageNums">
							<a href="#!" @click="searchUserList(item)"
								:style="currentPage == item ? 'color: #B25BFF' : 'color: pink'">{{item}}</a>
						</li>

						<!--动态的加class-->
						<li>
							<a href="#!" @click="searchUserList(currentPage+1)" :class="currentPage == totalPage ?
		   'btn-disabled' :
		   'btn-active'">下一页</a>
						</li>

						<li>
							<a href="#!" @click="searchUserList(totalPage)">尾页</a>
						</li>

						<li>
							跳转到<input class="page-input" @keyup.enter="searchUserList(forwardPage)"
								v-model="forwardPage" />页
						</li>
					</ul>
				</main>
			</div>
		</div>
	</div>
	<script src="./resources/js/http.js"></script>
	<script src="./resources/js/vue.global.prod.js"></script>
	<script src="./resources/js/bootstrap.bundle.min.js"></script>
	<script src="./resources/js/feather.min.js"></script>

	<script>

		Vue.createApp({
			data() {
				return {
					//列表数据
					list: [],
					totalPage: 1,
					currentPage: 1,
					totalCount: 1,
					pageSize: 2,
					delUserId: '',
					forwardPage: '',
					dialogVisible: false


				}
			},
			mounted: function () {
				this.searchUserList(1);
			},
			
			methods: {
				//点击页码数按钮进行页面跳转
				searchUserList(curPage) {
					if (curPage == null || curPage == 'undefined') {
						curPage = 1;
						this.forwardPage = curPage;
					} else if (curPage <= 0) {
						curPage = 1;
						this.forwardPage = 1;
					} else if (curPage > this.totalPage) {
						curPage = this.totalPage;
						this.forwardPage = this.totalPage;
					} else {
						this.forwardPage = curPage;
					}
					this.currentPage = Number(curPage);
					$http.post('/userTel/queryByPage', { "currentPage": curPage, "pageSize": this.pageSize }).then(res => {
						console.log("queryByPage 返回" + res);
						this.list = res;
						this.totalPage = res[0].totalCount / this.pageSize
						this.totalCount = res[0].totalCount;
					})
				},
				// 这里是计算属性computed：
				
			},
			computed:{
				// 这里主要通过这个方法动态的生成页码
				pageNums(){
					let left = 1;
					let right = this.totalPage;
					let pageArr = [];
					if (this.totalPage >= 6) {
						if (this.currentPage > 3 && this.currentPage <= this.totalPage - 2) {
							left = this.currentPage - 2;
							right = this.currentPage + 2;
						} else {
							if (this.currentPage <= 3) {
								left = 1;
								right = 6;
							} else {
								left = this.totalPage - 4;
								right = this.totalPage;
							}
						}
						while (left <= right) {
							pageArr.push(left);
							left++;
						}
						return pageArr;
					}

				}
			}


		}).mount('#app');
	</script>
</body>

</html>